<template>
	<view class="layout">
		<view class="layout-head">
			<Search @onConfirm="onConfirm" v-model="query" :showIcon="true" :iconType="CustomIconName.Add" @onIcon="onAdd"></Search>
			<u-tabs :list="NavList" :is-scroll="false" :current="navCurrentIndex" @change="changeNav"></u-tabs>

		</view>
		<view class="layout-body">
			<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<IndexCard v-for="item,index in data" :tabCurrentIndex="navCurrentIndex" :key="index" :data="item"></IndexCard>
			</mescroll-uni>
		</view>



	</view>


</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import PagesDemandRouterConfig from '@/pagesDemand/routerConfig.js'
	import ProjectApi from '@/apis/project.js'
	import IndexCard from './components/card/index.vue'
	import Search from '@/components/input/index.vue'
	import CustomIconName from '@/common/customIconFontName.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			IndexCard,
			Search
		},
		computed: {
			NavList() {
				return [{
						name: '需求管理',
						count: this.redNumData.demand,
						value: 'demand'
					}, {
						name: '需求调研',
						count: this.redNumData.investigate,
						value: 'investigate'
					}, {
						name: '需求定级',
						count: this.redNumData.waitGrading,
						value: 'waitGrading'
					},

					{
						name: '需求评审',
						count: this.redNumData.reviewInv,
						value: 'reviewInv'
					}
				]
			}
		},
		data() {
			return {
				navCurrentIndex: 0,
				CustomIconName,
				redNumData: {
					demand: 0,
					investigate: 0,
					waitGrading: 0,
					reviewInv: 0,
				},
				data: [],

				initQueryParams: {
					temp: 'demand',

				},
				canReset: false
			}
		},
		onLoad() {},
		// 详情返回列表,重新加载列表数据
		onShow() {
			this.getRedData()
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false

			// 注意: 子组件没有 onShow 的生命周期, 所以
			// 对于 mescroll-more.vue 和 mescroll-swiper.vue 的返回刷新, 需更新 1.3.3 版本, 且参考对应示例的onShow写法
		},
		methods: {
			onAdd() {
				wx.navigateTo({
					url: PagesDemandRouterConfig.AddDemand
				})
			},

			onConfirm() {

			},
			async getRedData() {
				let res = await ProjectApi.Demand.getRedData()
				if (res.code == 0) {
					let { demand, investigate, reviewInv, waitGrading } = res.body
					this.redNumData.demand = demand
					this.redNumData.investigate = investigate
					this.redNumData.waitGrading = waitGrading
					this.redNumData.reviewInv = reviewInv
				}
			},
			upCallback(page) {
				let query = {
					pageSize: page.size,
					pageNum: page.num,
					query: '',
				}
				Object.assign(query, this.initQueryParams)
				this.$nextTick(() => {
					ProjectApi.Demand.getListData(query).then((res) => {
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态; 
						if (page.num == 1) this.data = []; //如果是第一页需手动制空列表
						if (res.code === 0) {
							let list = res.body.list || []
							this.mescroll.endByPage(list.length, res.body.total)
							if (list.length) {
								this.data = [...this.data, ...list]
							}
						}
					}).catch((err) => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				})

			},


			changeNav(index) {
				this.navCurrentIndex = index
				let temp = this.NavList[index].value
				this.initQueryParams.temp = temp
				this.data = []
				this.mescroll.resetUpScroll() // 再刷新列表数据
				this.getRedData()
			}

		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;

		.layout {
			height: 100%;
			background-color: #F0F3F7;
			display: flex;
			flex-direction: column;

			&-body {
				padding: 0 30rpx;
				flex: 1;
				min-width: 0;
				min-height: 0;
				margin-bottom: 60rpx;

			}
		}
	}
</style>
